<script setup>
import axios from 'axios';
import { useRouter } from 'vue-router';
import { computed, onMounted, reactive, ref } from 'vue';
axios.defaults.baseURL = 'http://localhost:3000'
const router = useRouter()

// 每页显示的数量
const pagesize = ref(2)
//当前页
const page = ref(1)
// 总条数
const total = ref(null)
// 总页数
const pages = ref(null)


const house = reactive([])
onMounted(() => {
    gethouse()
})

const gethouse = async () => {
    let { data: { pagehouse, totalpage } } = await axios.get('/yzx/gethome', {
        params: {
            page: page.value,
            pagesize: 4
        }
    })

    pagehouse.forEach(item => {
        if (!item.u_id) {
            item.u_id = { admin: '张三', landlord: '' };  // 你可以根据需求设置默认值
        }
    });
    house.push(...pagehouse)


    total.value = totalpage
}
const count = ref(10)
const loading = ref(false)
const noMore = computed(() => count.value >= 20)
const disabled = computed(() => loading.value || noMore.value)
const load = () => {
    loading.value = true
    setTimeout(() => {

        page.value++
        gethouse()
        loading.value = false
    }, 2000)
}
</script>

<template>
    <div id="waterfall">
        <el-infinite-scroll :threshold="500" @load="load">
            <div id="waterbox" v-for="item in house" :key="item._id" v-infinite-scroll="load"
                :infinite-scroll-disabled="disabled" @click="router.push(`/home/xq?id=${item._id}`)">
                <img v-lazy="item.img[0]" alt="">
                <p><van-icon name="location-o" />{{ item.name }}</p>
                <p style="font-size: 14px;line-height: 20px;">
                    {{ item.desc }}
                </p>
                <div id="admin">
                    <img :src="item.u_id?.landlord || 'https://ts2.cn.mm.bing.net/th?id=OIP-C.gRfn6XdqNa3L6aVbzwWuLQHaHa&w=120&h=104&c=7&bgcl=e5c8e6&r=0&o=6&dpr=1.4&pid=13.1'"
                        alt="">
                    <span style="font-size: 10px;font-weight: bold;margin-left: 15px;display: inline-block;">{{
                        item.u_id.admin }}</span>
                    <span style="margin-left: 15px;">
                        <van-icon name="good-job-o" />
                        {{ item.roomNum }}{{ item.toiletNum }}
                    </span>
                    <span style="margin-left: 15px;">
                        <van-icon name="chat-o" />
                        {{ item.badNum }}
                    </span>
                </div>
            </div>
            <!-- 触底加载 -->
            <div v-if="loading">Loading...</div>
            <p v-if="noMore">No more</p>
        </el-infinite-scroll>
    </div>

</template>

<style scoped>
#waterfall {
    column-count: 2;
    /* 设置列数 */
    column-gap: 5px;
    /* 列与列之间的间距 */
    width: 100%;
    height: auto;
    background-color: #fbfbfb;
}

#waterbox {
    border: 1px solid #ddd;
    margin-bottom: 16px;
    box-shadow: 5px 5px 5px #8f8d8d4d;
    margin-left: 5px;
}

#waterbox img {
    width: 100%;
}

#admin img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    font-size: 12px;
}
</style>